<style scoped>
@import url(../../style/page/ldwq.css);
</style>
<template>
  <div class="mian">
    <avue-echart-header></avue-echart-header>
    <div class="left_box">
      <div class="box_con box1">
        <div class="title_box">汇聚环比增量</div>
        <div class="echart_box">
          <avue-echart-polarPie
            :data="hjhbzl.data"
            :option="hjhbzl.option"
          ></avue-echart-polarPie>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">汇聚环比增量</div>
        <div class="echart_box">
          <avue-echart-PercentBar
            :data="pieData4.data"
            :config="pieData4.config"
          ></avue-echart-PercentBar>
          <avue-echart-pictorialBar
            :data="pieData5.data"
          ></avue-echart-pictorialBar>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">近6个月新增和解除合同趋势</div>
        <div class="echart_box">
          <avue-echart-bars
            :data="xzhjhtqs.data"
            :option="xzhjhtqs.option"
            :unit="xzhjhtqs.unit"
            width="100%"
            height="100%"
          ></avue-echart-bars>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">数据质量分析</div>
        <div class="echart_box">
          <avue-echart-PercentBar
            :data="pieData.data"
            :config="pieData.config"
          ></avue-echart-PercentBar>
          <avue-echart-PercentBar
            :data="pieData1.data"
            :config="pieData1.config"
          ></avue-echart-PercentBar>
          <avue-echart-PercentBar
            :data="pieData2.data"
            :config="pieData2.config"
          ></avue-echart-PercentBar>
          <avue-echart-PercentBar
            :data="pieData3.data"
            :config="pieData3.config"
          ></avue-echart-PercentBar>
          <!-- <avue-echart-normalPie
              :data="sjzlfx2.data"
              :option="sjzlfx2.option"
              width="100%"
              height="100%"
            ></avue-echart-normalPie> -->
        </div>
      </div>
       <div class="box_con box1">
        <div class="title_box">地图指标数据展示</div>
        <div class="echart_box">
         
        </div>
      </div>
       <div class="box_con box1">
        <div class="title_box">地图指标数据展示</div>
        <div class="echart_box">
         
        </div>
      </div>
    </div>
    <div class="center_box">
      <div class="box_con box1">
        <div class="title_box">地区劳动合同汇聚率</div>
        <div class="echart_box map_box">
          <avue-echart-mapPng
            :jsonUrl="mapDatas.jsonUrl"
            :imgUrl="mapDatas.imgUrl"
            :data="mapDatas.data"
          ></avue-echart-mapPng>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">地区劳动合同汇聚率</div>
        <div class="echart_box" style="display:flex">
          <div style="width:100%;height:100%">
            <avue-echart-normalPie
              :data="sjzlfx2.data"
              :option="sjzlfx2.option"
              width="100%"
              height="100%"
            ></avue-echart-normalPie>
          </div>
          <!-- <div style="width:49%;height:100%">
            <avue-echart-normalPie
              :data="dqldhthjl.data"
              :option="dqldhthjl.option"
              width="100%"
              height="100%"
            ></avue-echart-normalPie>
          </div> -->
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">地区数据完整率排名</div>
        <div class="echart_box">
          <avue-echart-bars
            :data="dqsjwzl.data"
            :option="dqsjwzl.option"
            :unit="dqsjwzl.unit"
            width="100%"
            height="100%"
          ></avue-echart-bars>
        </div>
      </div>
        <div class="box_con box1">
        <div class="title_box">地图指标数据展示</div>
        <div class="echart_box">
         
        </div>
      </div>
       <div class="box_con box1">
        <div class="title_box">地图指标数据展示</div>
        <div class="echart_box">
         
        </div>
      </div>
       <div class="box_con box1">
        <div class="title_box">地图指标数据展示</div>
        <div class="echart_box">
         
        </div>
      </div>
    </div>
    <div class="right_box">
      <div class="box_con box1">
        <div class="title_box">地区劳动合同汇聚率</div>
        <div class="echart_box table_box">
          <com-table
            :pageSize="tableData.pageSize"
            :tableClass="tableData.tableClass"
            :columns="tableData.columns"
            :isBorder="tableData.isBorder"
            :datas="tableData.data"
          ></com-table>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">按行业新签和解除合同排名</div>
        <div class="echart_box">
          <avue-echart-bars
            :data="ahyxqhjchtphb.data"
            :option="ahyxqhjchtphb.option"
            :unit="ahyxqhjchtphb.unit"
            width="100%"
            height="100%"
          ></avue-echart-bars>
        </div>
      </div>
      <div class="box_con box1">
        <div class="title_box">数据完整率分析</div>
        <div class="echart_box">
          <avue-echart-bars
            :data="sjwzfx.data"
            :option="sjwzfx.option"
            :unit="sjwzfx.unit || ''"
            width="100%"
            height="100%"
          ></avue-echart-bars>
        </div>
      </div>

      <div class="box_con box1">
        <div class="title_box">金字塔形状</div>
        <div class="echart_box">
          <pyramids
            :data="pyramids.data"
            :option="pyramids.option"
            :unit="pyramids.unit"
            style="widht: 100%; height: 100%"
          ></pyramids>
        </div>
      </div>
       <div class="box_con box1">
        <div class="title_box">地图指标数据展示</div>
        <div class="echart_box">
         
        </div>
      </div>
       <div class="box_con box1">
        <div class="title_box">地图指标数据展示</div>
        <div class="echart_box">
         
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { adaptePX } from "@/lib/common";
import Pyramids from "../../components/pyramids";

export default {
  name: "main_ss",
  components: {
    Pyramids
  },
  data() {
    return {
      pyramids: {
        unit:'只',
        data: [
          { name: "高级职称", num: 10 },
          { name: "中级职称", num: 217 },
          { name: "初级职称", num: 7093 },
          { name: "无职称", num: 16680 }
        ],
        option: {
          // legend
          legend: true,
          legendPositionTop: '20%',
          legendPositionLeft: 10,
          legendOrient: "vertical",
          // label
          labelShow:true
        }
      },
      pieData5: {
        data: { value: 80 }
      },
      pieData: {
        config: { barType: "rect" },
        data: {
          name: "16岁以下",
          value: 40
        }
      },
      pieData1: {
        config: { barType: "round" },
        data: {
          name: "16岁以下",
          value: 80
        }
      },
      pieData3: {
        config: { barType: "pictorialBar", showBarName: true },
        data: [
          {
            name: "温州",
            value: 80
            // total:200
          }
        ]
      },
      pieData2: {
        config: { barType: "bar", showBarName: true },
        data: [
          {
            name: "温州",
            value: 80.38,
            unit: "%"
          }
        ]
      },
      pieData4: {
        config: { barType: "bar", showBarName: true, namePosition: "left" },
        data: [
          {
            name: "温州",
            value: 80.38,
            unit: "%"
          }
        ]
      },
      mapDatas: {
        jsonUrl: base_file_url + "public/JSON/mapPng/hz.json",
        imgUrl: base_file_url + "public/img/map_img.png",
        data: [
          {
            name: "临安区",
            value: 38.5,
            unit: "%",
            areacode: "330112"
          },
          {
            name: "主城区",
            value: "10.92",
            unit: "%",
            areacode: "330120"
          },
          {
            name: "淳安县",
            value: "35.4",
            unit: "%",
            areacode: "330127"
          },
          {
            name: "建德市",
            value: "60.28",
            unit: "%",
            areacode: "330182"
          },
          {
            name: "桐庐县",
            value: "30.8",
            unit: "%",
            areacode: "330122"
          },
          {
            name: "富阳区",
            value: "23.2",
            unit: "%",
            areacode: "330111"
          },
          {
            name: "余杭区",
            value: "6.58",
            unit: "%",
            areacode: "330110"
          },
          {
            name: "萧山区",
            value: "15.3",
            unit: "%",
            areacode: "330109"
          },
          {
            name: "钱塘区",
            value: "32.6",
            unit: "%",
            areacode: "330114"
          }
        ]
      },
      hjhbzl: {
        data: [
          {
            value: 109,
            name: "主城区"
          },
          {
            value: -19.8,
            name: "萧山区"
          },
          {
            value: 29.6,
            name: "余杭区"
          },
          {
            value: -40,
            name: "富阳区"
          },
          {
            value: -66.1,
            name: "临安区"
          },
          {
            value: 9.8,
            name: "桐庐县"
          },
          {
            value: -78.6,
            name: "建德市"
          },
          {
            value: -46.3,
            name: "淳安县"
          }
        ],
        option: {
          barColor: [
            { color1: "rgba(49, 150, 250, 1)", color2: "" },
            { color1: "rgba(77, 111, 236, 1)", color2: "" },
            { color1: "rgba(149, 112, 255, 1)", color2: "" },
            { color1: "rgba(222, 125, 255, 1)", color2: "" },
            { color1: "rgba(250, 118, 121, 1)", color2: "" },
            { color1: "rgba(53, 198, 215, 1)", color2: "" },
            { color1: "rgba(101, 223, 138, 1)", color2: "" },
            { color1: "rgba(253, 161, 79, 1)", color2: "" }
          ],
          polarRadius: "60%",
          axisSplitLineColor: "#DDDDDD",
          nameFontSize: adaptePX(17),
          nameColor: "#333",
          axisTickNameFontSize: 12,
          axisTickNameColor: "#fff",
          axisLineColor: "#DDDDDD",
          axisLabelShow: true,
          axisTickShow: false,
          labelShowValue: false,
          max: 120,
          min: -110,
          tanc: {
            show: true
          }
        }
      },
      tableData: {
        tableClass: ["ldht_table"],
        isBorder: false,
        pageSize: 4,
        columns: [
          { field: "prop1", title: "区域", width: 60 },
          { field: "prop2", title: "在职职工数" },
          { field: "prop3", title: "合同汇聚数" },
          { field: "prop4", title: "网签数", width: 70 },
          { field: "prop5", title: "电子化数" }
        ],
        data: [
          {
            prop1: "上城区",
            prop2: 530848,
            prop3: 47377,
            prop4: 1460,
            prop5: 45917
          },
          {
            prop1: "拱墅区",
            prop2: 566108,
            prop3: 44593,
            prop4: 3269,
            prop5: 41324
          },
          {
            prop1: "西湖区",
            prop2: 472117,
            prop3: 55811,
            prop4: 6225,
            prop5: 49586
          },
          {
            prop1: "滨江区",
            prop2: 469376,
            prop3: 19650,
            prop4: 323,
            prop5: 19327
          },
          {
            prop1: "钱塘区",
            prop2: 324482,
            prop3: 105843,
            prop4: 6972,
            prop5: 98871
          },
          {
            prop1: "萧山区",
            prop2: 590934,
            prop3: 90591,
            prop4: 8781,
            prop5: 81810
          },
          {
            prop1: "余杭区",
            prop2: 409106,
            prop3: 26913,
            prop4: 1800,
            prop5: 25113
          },
          {
            prop1: "临平区",
            prop2: 340894,
            prop3: 23249,
            prop4: 1893,
            prop5: 21356
          },
          {
            prop1: "富阳区",
            prop2: 212652,
            prop3: 49262,
            prop4: 1574,
            prop5: 47688
          },
          {
            prop1: "临安区",
            prop2: 137746,
            prop3: 53025,
            prop4: 823,
            prop5: 52202
          },
          {
            prop1: "桐庐区",
            prop2: 98431,
            prop3: 30297,
            prop4: 1061,
            prop5: 29236
          },
          {
            prop1: "建德区",
            prop2: 79438,
            prop3: 47887,
            prop4: 2118,
            prop5: 45769
          },
          {
            prop1: "淳安区",
            prop2: 43165,
            prop3: 15280,
            prop4: 1062,
            prop5: 14218
          }
        ]
      },
      dqldhthjl: {
        data: [
          {
            value: 11345,
            name: "制造业"
          },
          {
            value: 9040,
            name: "租赁和商务服务"
          },
          {
            value: 9040,
            name: "租赁和商务服务2"
          }
        ],
        option: {
          id: "",
          gridX: 0,
          gridX2: 0,
          gridY: 0,
          gridY2: 0,
          colors: ["#5094F5", "#FFB253"],
          radius: ["0", "52%"],
          center: ["20%", "50%"],
          nameFontSize: adaptePX(16),
          nameColor: "#333",
          labelShow: false,
          labelFormatter: "{b}\n{d}%",
          roseType: false,
          legend: true,
          legendShowValueColor: "#1492FF",
          // legendWidth:'80%',
          legendPositionLeft: "38%",
          legendPositionTop: "center",
          legendOrient: "vertical",
          legendItemGap: 15,
          legendIcon: "rect",
          legendshowFh: false,
          // legendPositionBottom:'0%',
          legendShowPercent: true,
          legendValueUnit: "人",
          legendShowValue: true,
          labelLineShow: true,
          labelLineLength: 20,
          labelLineLength2: 10,
          //title
          title1: {
            fontSize: adaptePX(14),
            text: "",
            fontcolor: "#333",
            left: "9.9%",
            top: "40%",
            show: true
          },
          title2: {
            fontSize: 20,
            fontcolor: "#333",
            top: 10,
            show: false
          },
          tanc: {
            show: true,
            title: "",
            url: "",
            parme: true
          }
        }
      },

      sjzlfx2: {
        data: [
          {
            value: 11345,
            name: "制造业"
          },
          {
            value: 9040,
            name: "租赁和商务服务"
          },
          {
            value: 3117,
            name: "批发和零售业"
          },
          {
            value: 2183,
            name: "建筑业"
          },
          {
            value: 1954,
            name: "居民服务业"
          },
          {
            value: 1921,
            name: "科学和技术服务业"
          }
        ],
        option: {
          id: "",
          gridX: 0,
          gridX2: 0,
          gridY: 0,
          gridY2: 0,
          colors: ["#5094F5", "#FFB253"],
          radius: ["38%", "52%"],
          center: ["20%", "50%"],
          nameFontSize: adaptePX(16),
          nameColor: "#333",
          labelShow: false,
          labelFormatter: "{b}\n{d}%",
          roseType: false,
          legend: true,
          legendShowValueColor: "#1492FF",
          // legendWidth:'80%',
          legendPositionLeft: "38%",
          legendPositionTop: "center",
          legendOrient: "vertical",
          legendItemGap: 15,
          legendIcon: "rect",
          legendshowFh: false,
          // legendPositionBottom:'0%',
          legendShowPercent: true,
          legendValueUnit: "人",
          legendShowValue: false,
          labelLineShow: true,
          labelLineLength: 20,
          labelLineLength2: 10,
          //title
          title1: {
            fontSize: adaptePX(14),
            text: "",
            fontcolor: "#333",
            left: "9.9%",
            top: "40%",
            show: true
          },
          title2: {
            fontSize: 20,
            fontcolor: "#333",
            top: 10,
            show: false
          },
          tanc: {
            show: true,
            title: "",
            url: "",
            parme: true
          }
        }
      },
      ahyxqhjchtphb: {
        data: {
          categories: [
            "金融业",
            "房地产业",
            "住宿和餐饮业",
            "信息技术服务业",
            "科学研究和技术服务业",
            "居民服务业",
            "建筑业",
            "批发和零售业",
            "租赁和商务服务业",
            "制造业"
          ],
          series: [
            {
              name: "新增",
              data: [506, 556, 818, 960, 1921, 1954, 2183, 3117, 9040, 11345]
            },
            {
              name: "解除",
              data: [4, 56, 49, 28, 1175, 389, 505, 125, 837, 953]
            }
          ]
        },
        option: {
          type: ["bar"],
          gridTop: 10,
          gridRight: "5",
          gridLeft: "12",
          gridBottom: "2",
          //legend
          legend: true,
          legendPositionTop: "top",
          legendPositionLeft: "center",
          legendColor: "#333333",
          legendFontSize: adaptePX(12),
          legendIcon: "circle",
          //title
          istl: false,
          stack: true,
          category: true,
          //x
          xNameColor: "#303030",
          xAxisLineShow: false,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: "",
          xNameFontSize: adaptePX(14),
          xAxisName: " ",
          xAxisTickShow: false,
          xAxisInterval: 0,
          xAxisLabelShow: false,
          //y
          yNameFontSize: 12,
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: false,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          // series
          barWidth: 9,
          barRadius: "0",
          seriesLableShow: false,
          seriesLableFontSize: 12,
          seriesLableColor: "#000",
          barColor: [
            {
              color1: "#5094F5"
            },
            {
              color1: "#FFB253"
            }
          ]
        }
      },
      sjwzfx: {
        unit: "%",
        data: {
          categories: ["合同信息", "企业信息", "劳动者信息", "用工信息"],
          series: [
            {
              name: " ",
              data: [57.59, 80.64, 98.82, 6.26]
            }
          ]
        },
        option: {
          type: ["bar"],
          gridTop: 15,
          gridRight: "5",
          gridLeft: "4",
          gridBottom: "2",
          //legend
          legend: false,
          legendPositionTop: "top",
          legendPositionLeft: "20%",
          legendColor: "#333333",
          legendFontSize: adaptePX(12),
          //title
          istl: false,
          //x
          xNameColor: "#303030",
          xAxisLineShow: true,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: "",
          xNameFontSize: adaptePX(14),
          xAxisName: " ",
          xAxisTickShow: false,
          xAxisInterval: 0,
          //y
          yNameFontSize: 12,
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: true,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          // series
          barWidth: 18,
          barRadius: "0",
          seriesLableShow: true,
          seriesLableFontSize: adaptePX(12),
          seriesLableColor: "#333",
          barColor: [
            {
              color1: "#FFB253"
            }
          ]
        }
      },
      dqsjwzl: {
        unit: "万人",
        data: {
          categories: [
            "建德",
            "萧山",
            "临平",
            "拱墅",
            "淳安",
            "余杭",
            "上城",
            "西湖",
            "桐庐",
            "钱塘",
            "富阳",
            "滨江",
            "临安"
          ],
          series: [
            {
              name: "完整率",
              data: [
                63.34,
                45.5,
                45.12,
                44.38,
                44.34,
                44.22,
                44.2,
                44.13,
                42.86,
                42.67,
                42.64,
                41.83,
                41.62
              ]
            },
            {
              name: "完整率2",
              data: [
                63.34,
                45.5,
                45.12,
                44.38,
                44.34,
                44.22,
                44.2,
                44.13,
                42.86,
                42.67,
                42.64,
                41.83,
                41.62
              ]
            }
          ]
        },
        option: {
          type: ["bar", "line"],
          gridTop: 15,
          gridRight: "10",
          gridLeft: "4",
          gridBottom: "2",
          //legend
          legend: true,
          legendPositionTop: "top",
          legendPositionLeft: "center",
          legendColor: "#333333",
          legendFontSize: adaptePX(12),
          //title
          istl: false,
          //x
          xNameColor: "#303030",
          xAxisLineShow: true,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: "",
          xNameFontSize: adaptePX(14),
          xAxisName: " ",
          xAxisTickShow: false,
          xAxisInterval: 0,
          //y
          yNameFontSize: 12,
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: true,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          yAxisTwo: true,
          // series
          barWidth: 12,
          barRadius: "0",
          seriesLableShow: true,
          seriesLableFontSize: adaptePX(12),
          seriesLableColor: "#333",
          barColor: [
            {
              color1: "#2380FF"
            },
            {
              color1: "#FFA132"
            }
          ]
        }
      },
      xzhjhtqs: {
        unit: "万人",
        data: {
          categories: [
            "202012",
            "202101",
            "202102",
            "202103",
            "202104",
            "202105"
          ],
          series: [
            {
              name: "解除",
              data: [973, 831, 318, 894, 4969, 8951]
            },
            {
              name: "新增",
              data: [5667, 12477, 7088, 19727, 41011, 25822]
            },
            {
              name: "去年同期解除",
              data: [9, 21, 29, 5, 5, 5]
            },
            {
              name: "去年同期新增",
              data: [682, 1113, 696, 986, 901, 824]
            }
          ]
        },
        option: {
          type: ["line"],
          gridTop: 21,
          gridRight: "5",
          gridLeft: "0",
          gridBottom: "0",
          //legend
          legend: true,
          legendPositionTop: "top",
          legendPositionLeft: "2%",
          legendColor: "#333333",
          legendFontSize: adaptePX(12),
          //title
          istl: false,
          //x
          xNameColor: "#303030",
          xAxisLineShow: true,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: 20,
          xNameFontSize: adaptePX(14),
          xAxisName: "",
          xAxisTickShow: false,
          xAxisInterval: 0,
          //y
          yName: "单位：万人",
          yNameFontSize: adaptePX(12),
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: true,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          // series
          barWidth: 16,
          barRadius: "0",
          seriesLableShow: false,
          seriesLableFontSize: 12,
          seriesLableColor: "#000",
          barColor: [
            {
              color1: "#2380FF"
            },
            {
              color1: "#FFA93F"
            },
            {
              color1: "#FFA93F"
            },
            {
              color1: "#2380FF"
            }
          ]
        }
      }
    };
  },
  methods:{
    getData(){
      axios.get('/public/JSON/ss.json').then( res => {
        let data = res.data;
        this.pyramids.unit = data.pyramids.unit;
        this.pyramids.data = data.pyramids.data;
        // console.log(data);
      })
    }
  },
  mounted(){
    this.getData()
  }
};
</script>
